<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="js/jqeasyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/jqeasyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="js/jqeasyui/themes/color.css">
	<script type="text/javascript" src="js/jqeasyui/jquery.min.js"></script>
	<script type="text/javascript" src="js/jqeasyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jqeasyui/locale/easyui-lang-zh_CN.js"></script>
	<style>
		body{
			margin: 0px;
		}
	</style>
	<script type="text/javascript">
        var url = 'http://localhost:28561/handler/stuInfoHandler.ashx';
        var flag;
        function newUser() {
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增学生');
            $('#fm').form('clear');
            flag = "add";
        }
        function updateUserInfo() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('center').dialog('setTitle', '编辑学生');
                $('#fm').form('load',row);
                flag = "edit";
            }
            
        }
         function saveUser() {
            if ($('#fm').form('validate')) {
                if (flag == "add") {
                    $.ajax({
                        url: url,
                        type: "get",
                        async: true,
                        data: { op: "add", StuNO: $('#StuNO').val(), StuName: $('#StuName').val(), Age: $('#Age').val() },
                        success: function (data, status) {
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                        },
                        error: function (data, statuc) {
                            alert(JSON.stringify(data));
                        }
                    });
                }
                else if (flag == "edit") {
                    $.messager.alert("系统提示", "此时要编辑信息！"+$("#StuName").val(), "info");
                }
            }
        }

        function destroyUser() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.messager.confirm('系统提示', '您确定要删除学生【' + row.StuName + '】吗？',
                    function (result) {
                        if (result) {
                            $.ajax({
                                type: "get",
                                url: url,
                                async: true,
                                data: { op: "remove", stuNO: row.StuNO },
                                success: function (data, status) {
                                    $('#dlg').dialog('close');
                                    $('#dg').datagrid('reload');
                                },
                                error: function (data, statuc) {
                                }
                            });
                        }
                    }
                );
            }
            else {
                $.messager.alert("系统提示", "请首先选择要删除的学生信息！");
            }
        }
			 function showInfo() {
            //获取每页显示的记录数
            var pageSize = $('#dg').datagrid('options').pageSize;
            $.messager.alert('inf',pageSize);
        }
        $(function () {
            //在分页控件点击时获取到当前页码,可以扩展该方法从而从服务器端真实提取分页数据
            var pager = $('#dg').datagrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    $.messager.alert('info', pageNum);
                }
            });
        })
    </script>


	<body>
    <table id="dg" title="学生列表" class="easyui-datagrid" style="width: 100%; height: 250px" data-options="pageSize:10"
        url="http://localhost:28561/handler/stuInfoHandler.ashx?op=check" pagination="true"
        toolbar="#toolbar" rownumbers="true" fitcolumns="true" singleselect="true">
        <thead>
            <tr>
                <th field="StuNO" width="30%">
                    学号
                </th>
                <th field="StuName" width="30%">
                    姓名
                </th>
                <th field="Age" width="40%">
                    年龄
                </th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true"
            onclick="newUser();">新增</a> <a href="javascript:void(0)" class="easyui-linkbutton"
                iconcls="icon-edit" plain="true" onclick="updateUserInfo();">编辑</a> <a href="javascript:void(0)"
                    class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroyUser()">
                    移除</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-sum"
                        plain="true" onclick="showInfo()">显示</a>
    </div>
    <div id="dlg" class="easyui-dialog" style="width: 400px" closed="true" buttons="#dlg-buttons">
        <form id="fm" novalidate style="margin: 0; padding: 20px 50px">
        <div style="margin-bottom: 20px; font-size: 14px; border-bottom: 1px solid #ccc">
            学生信息</div>
        <div style="margin-bottom: 10px">
            <input id="StuNO" name="StuNO" class="easyui-textbox" required="true" label="学号:" style="width: 100%" />
        </div>
        <div style="margin-bottom: 10px">
            <input id="StuName" name="StuName" class="easyui-textbox" required="true" label="姓名:" style="width: 100%" />
        </div>
        <div style="margin-bottom: 10px">
            <input id="Age" name="Age" class="easyui-textbox" required="true" label="年龄:" style="width: 100%" />
        </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="saveUser()"
            style="width: 90px">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton"
                iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width: 90px">
                Cancel</a>
    </div>
</body>

</html>
